<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.9.2/dist/js/jsplumb.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/3.7.0/animate.min.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/bee.js"></script>
</head>

<body>
    <div id="app">
        <bee-fixed-nav :align="align1" :button-list="buttonList"></bee-fixed-nav>
        <bee-fixed-nav :align="align2" :button-list="buttonList"></bee-fixed-nav>
        <bee-fixed-nav :align="align3" :button-list="buttonList"></bee-fixed-nav>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        computed: {
            align1() {
                return 'left'
            },
            align2() {
                return 'center'
            },
            align3() {
                return 'right'
            },
            buttonList() {
                return [
                    {
                        label: "按钮1",
                    },
                    {
                        label: "按钮2",
                        icon: "",
                        type: "success",
                        size: "small",
                        disabled: "disabled",
                        fun: (i) => {
                            this.buttonClick(i)

                        },
                    },
                    {
                        label: "",
                        icon: "el-icon-message",
                        type: "danger",
                        size: "mini",
                        fun: (i) => {
                            this.buttonClick(i)

                        },
                    },
                ];
            },
        },
        methods: {
            buttonClick(index) {
                alert(index)
            }
        }
    })
</script>

</html>